<template>
  <div
    class="scene-head-widget"
    id="scene-head-widget"
    :style="getStyle('head')"
  >
    <div class="hader-Box-bg">
      <div class="header-Box">
        <div class="header-one">
          <div class="header-user-touxiang">
            <img
              src="@a/images/design/sivlerMedical/touxiang.png"
              alt=""
              class="touxiangImg"
            />
          </div>
          欢迎使用
        </div>
        <div class="header-time">
          <div class="date">{{ datePlus }}</div>
          <div class="time">{{ timePlus }}</div>
        </div>
      </div>
      <div class="logo-Box">
        <div class="logoBoxImgBox">
          <!-- <img
            src="@a/images/design/sivlerMedical/logo.png"
            alt=""
            class="ImgBox"
          /> -->
          <img
            v-show="QrCodeResource2"
            :src="QrCodeResource2"
            alt=""
            class="ImgBox"
          />
        </div>
      </div>
    </div>
    <div class="Index-title-Box">自助服务终端</div>
    <div class="Index-Menus-Box">
      <div class="Menus-Row">
        <div class="Index-Menus-Item" @click="clickFunction(false)">
          <img
            src="@a/images/design/sivlerMedical/ziZhuJianDang.png"
            alt=""
            style="width: 100%; height: 100%"
          />
          <div class="menus-content">自助建档</div>
        </div>
        <div class="Index-Menus-Item" @click="clickFunction(false)">
          <img
            src="@a/images/design/sivlerMedical/ZiZhuGuaHao.png"
            alt=""
            style="width: 100%; height: 100%"
          />
          <div class="menus-content">自助挂号</div>
        </div>
      </div>
      <div class="Menus-Row">
        <div class="Index-Menus-Item" @click="clickFunction(true)">
          <img
            src="@a/images/design/sivlerMedical/ZiZhuBaoDao.png"
            alt=""
            style="width: 100%; height: 100%"
          />
          <div class="menus-content">自助报到</div>
        </div>
        <div class="Index-Menus-Item" @click="clickFunction(false)">
          <img
            src="@a/images/design/sivlerMedical/MenZhenJiaoFei.png"
            alt=""
            style="width: 100%; height: 100%"
          />
          <div class="menus-content">门诊缴费</div>
        </div>
      </div>
    </div>
    <div class="footer-Box">
      <div class="footer-one-box">
        <div class="oneRow-connect">
          服务短号：{{ getStatusMessage("ServiceCornet") || "" }}
        </div>
        <div class="oneRow-Left">
          服务电话：{{ getStatusMessage("serviceCall") || "" }}
        </div>
      </div>
      <div class="footer-two-box">
        <div class="footer-two-box-one">
          设备编号：{{ getStatusMessage("equipmentNumber") || "" }}
        </div>
        <div class="footer-two-box-two">
          位置：{{ getStatusMessage("DeviceLocation") || "" }}
        </div>
        <div class="footer-two-box-tree">
          版本：{{ getStatusMessage("DeviceVersion") || "" }}
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      get-container="#scene-head-widget"
      class="report-sivler-medical-customClass"
      closeable
      :style="{width: '800px',textAlign: 'center'}"
    >
    <div class="countDownBox">{{countDownNum}}</div>
      暂未开放服务
    </van-popup>
  </div>
</template>

<script>
import dayjs from "dayjs";
import emitter from "@/utils/designer/emitter";
import { getWeek, pxToVw } from "@/utils/common";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import { Popup } from "vant";
export default {
  name: "scene-report-sivler-medical",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    datePlus: {
      type: String,
    },
    timePlus: {
      type: String,
    },
  },

  data() {
    return {
      week: "",
      mockOpen: false,
      optionsInfo: Object(),
      date: dayjs().format("YYYY年MM月DD日"),
      time: dayjs().format("HH:mm:ss"),
      show: false,
      countDownNum: 3,
      countDownNumId: null
    };
  },

  computed: {
    //获取二维码资源
    QrCodeResource2() {
      let { qrcodeUrl2 } = this.optionsInfo;
      if (qrcodeUrl2) {
        return qrcodeUrl2;
      } else {
        return "";
      }
    },
    //获取LOGO资源
    pictureResource() {
      let { imageUrl = Object() } = this.optionsInfo;
      if (this.$lodash.isObject(imageUrl)) {
        return imageUrl?.url;
      } else {
        return imageUrl;
      }
    },

    timeClassName() {
      return function (val) {
        return val ? "date-time" : "time-date";
      };
    },

    // 时间日期-显示
    dataTimeShownInfo() {
      let { dataTimeModal = "dataTime" } = this.optionsInfo;
      return dataTimeModal === "dataTime";
    },

    timeType() {
      return this.field.options.reportInfoConfig.timeValue;
    },

    // 获取日期
    getWeekInfo() {
      return function (info) {
        return getWeek(info);
      };
    },
    getStatusMessage() {
      return function (val) {
        const self = this;
        let {
          ServiceCornet,
          serviceCall,
          equipmentNumber,
          DeviceLocation,
          DeviceVersion,
        } = self.optionsInfo;
        switch (val) {
          case "ServiceCornet":
            return ServiceCornet;
          case "serviceCall":
            return serviceCall;
          case "equipmentNumber":
            return equipmentNumber;
          case "DeviceLocation":
            return DeviceLocation;
          case "DeviceVersion":
            return DeviceVersion;
        }
      };
    },
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let { headHeight, backgroundColor, fontColor } = self.optionsInfo;
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(1920));
            Reflect.set(Obj, "backgroundColor", backgroundColor);
            Reflect.set(Obj, "color", fontColor);
            return Obj;
        }
      };
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.updateTime();
    this.handleOnMounted();
    //this.initWebSocket();
  },

  methods: {
    clickFunction(value) {
      if (!value) {
        this.show = true;
        this.countDownNum = 3
        if(this.countDownNumId) clearInterval(this.countDownNumId) 
        this.countDownNumId =  setInterval(() => {
        this.countDownNum = this.countDownNum - 1;
        // 到达时间--返回首页-清空定时器
        console.log('this.countDownNum',this.countDownNum)
        if (this.countDownNum <= 0) {
          this.show = false
          clearInterval(this.countDownNumId);
        }
      }, 1000);
        // Dialog({ message: '提示1' });
        // "暂未开放服务
        // <strong>proxy is <i>HTML</i> string</strong>
        // this.$alert('暂未开放服务', "", {
        //   confirmButtonText: "确定",
        //   customClass: 'report-sivler-medical-customClass',
        // });
        return;
      } else {
        this.$emit("jumpIndex", 0);
      }
    },
    // 获取时间
    updateTime(val) {
      let timeType = this.field.options.reportInfoConfig.timeValue;
      if (!!val) {
        let msg = JSON.parse(val);
        if (!!msg && !!msg.timestamp) {
          let timestamp = dayjs.unix(msg.timestamp);
          [this.week, this.date, this.time] = dayjs(timestamp)
            .format(`d,${timeType},HH:mm:ss`)
            .split(",");
        } else {
          [this.week, this.date, this.time] = dayjs()
            .format(`d,${timeType},HH:mm:ss`)
            .split(",");
        }
      } else {
        [this.week, this.date, this.time] = dayjs()
          .format(`d,${timeType},HH:mm:ss`)
          .split(",");
      }
    },

    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "headerInfo":
          this.updateTime(data);
          break;
      }
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },

  watch: {
    timeType: {
      handler: function (val) {
        if (val) {
          this.updateTime();
        }
      },
      deep: true,
      immediate: true,
    },

    field: {
      handler: function (val) {
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss">
.report-sivler-medical-customClass {
  /* 自定义样式 */
  /* 其他样式 */
  font-size: 80px;
  padding: 80px 0;
  border-radius: 40px;
  .countDownBox{
    font-size: 80px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>
<style lang="scss" scoped>
.footer-Box {
  box-sizing: border-box;
  width: 100%;
  margin-top: 454px;
  padding: 0 60px;
  position: absolute;
  bottom: 51px;
  left: 0;
  
  .footer-one-box {
    display: flex;
    font-weight: 500;
    font-size: 36px;
    color: #1f4879;
    .oneRow-connect {
      width: 400px;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
    .oneRow-Left {
      margin-left: 68px;
      width: 600px;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
  }
  .footer-two-box {
    font-weight: 400;
    font-size: 28px;
    color: #1f4879;
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    .footer-two-box-one {
      width: 250px;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
    .footer-two-box-two {
      width: 400px;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
    .footer-two-box-tree {
      width: 350px;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
  }
}
.Index-Menus-Box {
  padding: 0 100px;
  .Menus-Row {
    display: flex;
    justify-content: space-between;
  }
  .Index-Menus-Item {
    width: 420px;
    height: 380px;
    position: relative;
    font-weight: 600;
    font-size: 48px;
    color: #ffffff;
    .menus-content {
      position: absolute;
      top: 53px;
      left: 50px;
    }
  }
}
.Index-title-Box {
  font-weight: 600;
  font-size: 72px;
  color: #4353df;
  display: flex;
  justify-content: center;
  margin-top: 74px;
  margin-bottom: 83px;
}
.scene-head-widget {
  color: #333;
  display: flex;
  height: 100%;
  flex-direction: column;
  position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  .hader-Box-bg {
    // height: 250px;
    background: #0c70e5;
    padding: 35px 60px 42px 60px;
  }
  .header-one {
    display: flex;
    align-content: center;
    .header-user-touxiang {
      width: 40px;
      height: 40px;
      margin-right: 17px;
      .touxiangImg {
        width: 100%;
        height: 100%;
      }
    }
  }
  .header-Box {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 36px;
    color: #ffffff;
    .header-time {
      display: flex;
      .time {
        margin-left: 10px;
      }
    }
  }
  .logo-Box {
    margin-top: 27px;
    .logoBoxImgBox {
      // width: 456px;
      // height: 96px;
      min-height: 96px;
      .ImgBox {
        height: 90px !important;
        max-width: 100% !important;
        object-fit: contain;
      }
    }
  }
}
</style>
